
.slider {
	position: relative;
	cursor: pointer;
	height: 20px;

	&__wrapper {
		flex-grow: 1;
	}

	&__input {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		z-index: 2;
		cursor: pointer;

		&::-webkit-slider-thumb {
			width: 1px;
			border: 0;
		}

		&::-moz-range-thumb {
			width: 1px;
			border: 0;
		}

		&::-ms-thumb {
			width: 1px;
			border: 0;
		}

		&:focus + .slider__track {
			.slider__track__progress {
				&:after {
					width: 12px;
					height: 12px;
					top: -4px;
					right: -6px;
					background: lighten(colour('turquoise'), 10%);
				}
				&--small:after {
					width: 6px;
					height: 6px;
					top: -2px;
					right: -3px;
				}
			}
		}
	}

	&__track {
		position: absolute;
		background: rgba(0,0,0,0.2);
		border-radius: 2px;
		height: 4px;
		top: 50%;
		right: 0;
		left: 0;
		margin-top: -3px;

		&--small {
			height: 2px;
		}

		&__progress {
			position: absolute;
			background: colour('turquoise');
			pointer-events: none;
			top: 0;
			left: 0;
			height: 100%;
			max-width: 100%;
			border-radius: 4px;

			&:after {
				@include animate(0.1s);
				content: '';
				display: block;
				background: colour('turquoise');
				position: absolute;
				top: 0;
				right: -1px;
				width: 4px;
				height: 4px;
				border-radius: 50%;
			}

			&--small {
				border-radius: 2px;

				&:after {
					width: 2px;
					height: 2px;
				}
			}
		}
	}

	&--disabled,
	&--muted {
		.slider__track__progress {
			background: colour('mid_grey');

			&:after {
				background: colour('mid_grey') !important;
			}
		}
	}

	&:hover {
		.slider__track {
			&__progress {
				&:after {
					width: 12px;
					height: 12px;
					top: -4px;
					right: -6px;
					background: lighten(colour('turquoise'), 10%);
				}

				&--small {
					&:after {
						width: 10px;
						height: 10px;
						top: -4px;
						right: -3px;
					}
				}
			}
		}
	}

	&__wrapper--vertical {
		height: 100%;
		width: 20px;

		.slider {
			height: 100%;
			width: 20px;

			&__input {
				-webkit-appearance: slider-vertical;

				&:focus + .slider__track {
					.slider__track__progress:after {
						top: -6px;
						left: -4px;
					}
				}
			}

			&__track {
				height: auto;
				width: 4px;
				left: 42%;
				top: 0;
				right: auto;
				bottom: 0;
				margin-left: -3px;
				margin-top: auto;

				&__progress {
					top: auto;
					bottom: 0;
					width: 100%;
					max-height: 100%;

					&:after {
						top: -1px;
						left: 0;
					}
				}
			}

			&:hover {
				.slider__track {
					&__progress {
						&:after {
							top: -6px;
							left: -4px;
						}
					}
				}
			}
		}
	}
}
